<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/mi_project/css/index-top.css">
    <script src="/mi_project/layui/layui.js"></script>
    <link rel="stylesheet" href="/mi_project/layui/css/layui.css">
    <script src="/mi_project/js/jquery.js"></script>
    <script src="/mi_project/js/jquery.cookie.js"></script>
    <script src="/mi_project/js/common.js"></script>
</head>

<body style="width: 750px;height: 400px;padding-left: 50px;">
    <div class="layui-form addressForm">
        <div class="addressFormTitle">
            <h2>姓名和手机</h2>
            <input type="text" class="consignee" placeholder="姓名">
            <input type="text" class="mobile" placeholder="手机号">
        </div>
        <div class="addressFormTitle">
            <h2>请选择地址</h2>
        </div>
        <div class="selectMaxBox">
            <div class="selectBox">
                <select name="city" lay-verify="" class="province" lay-filter="select1">
                    <option value="001" disabled='disabled' selected='selected'>请选择省</option>
                </select>
            </div>
            <div class="selectBox">
                <select name="city" lay-verify="" class="city" lay-filter="select2">
                    <option value="001" disabled='disabled' selected='selected'>请选择市</option>
                </select>
            </div>
            <div class="selectBox">
                <select name="city" lay-verify="" class="area" lay-filter="select3">
                    <option value="001" disabled='disabled' selected='selected'>请选择区</option>
                </select>
            </div>
        </div>
        <div class="addressFormTitle">
            <h2>详细地址</h2>
        </div>
        <textarea class="address"></textarea>
        <div><button type="button" class="layui-btn">确定</button></div>
    </div>
</body>

</html>
<script>

    function getAddress(data, jdom) {
        $.ajax({
            url: urls + '/system/province',
            data: { parentId: data },
            success: function (backData) {
                for (let key in backData.data) {
                    jdom[0].innerHTML += `<option value="${backData.data[key].id}">${backData.data[key].name}</option>`;
                }
                layui.form.render('select');
            }
        })
    }


    layui.use(['jquery', 'form'], function () {
        var form = layui.form,
            $ = layui.jquery
    });
    layui.form.on('select(select1)', function (data) {
        getAddress(data.value, $('.city'))
        $('.area')[0].innerHTML = `<option value="001" disabled='disabled' selected='selected'>请选择区</option>`;

    });
    layui.form.on('select(select2)', function (data) {
        getAddress(data.value, $('.area'))
    });
    getAddress(1, $('.province'))
    let addressIdLS = JSON.parse(localStorage.getItem('addressIdLS'))
    if (addressIdLS) {
        $('.addressForm button').click(function () {
            $.ajax({
                url: urls + '/address/change',
                data: {
                    addressId:addressIdLS,
                    consignee: $('.consignee').val(),
                    mobile: $('.mobile').val(),
                    province: $('.province').val(),
                    city: $('.city').val(),
                    area: $('.area').val(),
                    address: $('.address').val(),
                    isDefault: 1,
                    userId: $.cookie('user').id
                },
                success: function (backData) {
                    if (backData.code == 0) {
                        layer.msg('修改成功');
                    } else {
                        layer.msg(backData.msg)
                    }
                }
            })
        })
        localStorage.removeItem('addressIdLS')
    } else {
        $('.addressForm button').click(function () {
            $.ajax({
                url: urls + '/address/add',
                data: {
                    consignee: $('.consignee').val(),
                    mobile: $('.mobile').val(),
                    province: $('.province').val(),
                    city: $('.city').val(),
                    area: $('.area').val(),
                    address: $('.address').val(),
                    isDefault: 1,
                    userId: $.cookie('user').id
                },
                success: function (backData) {
                    if (backData.code == 0) {
                        layer.msg('添加成功');
                    } else {
                        layer.msg(backData.msg)
                    }
                }
            })
        })
    }

</script>